<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
</head>
<body class="pear-container">
<div class="layui-card">
    <div class="layui-card-body">
        <form class="layui-form">
            <div class="layui-form-item" style="padding-top: 10px;">
                <div class="layui-input-group">
                    <div class="layui-input-prefix">菜单名称</div>
                    <input type="text" lay-affix="clear" name="title" placeholder="请输入菜单名称" autocomplete="off" class="layui-input">
                    <div class="layui-input-suffix">
                        <button type="button" class="layui-btn" lay-submit lay-filter="power-query">
                            <i class="layui-icon layui-icon-search"></i>查询
                        </button>
                        <button type="reset" class="layui-btn layui-btn-primary">
                            <i class="layui-icon layui-icon-refresh"></i>重置
                        </button>
                    </div>
                </div>
            </div>
        </form>
    </div>
</div>

<div class="layui-bg-gray" style="padding: 16px;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2">
            <div class="layui-card">
                <div class="layui-card-body">
                    <button type="button" class="layui-btn layui-btn-disabled layui-btn-fluid">菜单树</button>
                    <hr class="layui-border-green">
                    <div style="overflow: auto;">
                        <ul id="power-tree" class="power-tree" data-id="0"></ul>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-col-md10">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="power-table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
{# 表格操作 #}
<script type="text/html" id="toolbar">
    {% if power.power_add %}
    <button class="layui-btn layui-btn-sm" lay-event="toolbar-add">
        <i class="pear-icon pear-icon-add"></i>
        新增
    </button>
    {% endif %}
    {% if power.power_del %}
    <button class="layui-btn layui-btn-sm" lay-event="toolbar-remove">
        <i class="pear-icon pear-icon-ashbin"></i>
        删除
    </button>
    {% endif %}
</script>
{# 用户修改操作 #}
<script type="text/html" id="tool">
    <div class="layui-btn-group">
        {% if power.power_edit %}
        <button class="layui-btn layui-btn-sm" lay-event="tool-edit">
            <i class="layui-icon layui-icon-edit"></i>
        </button>
        {% endif %}
        {% if power.power_del %}
        <button class="layui-btn layui-btn-sm" lay-event="tool-remove">
            <i class="layui-icon layui-icon-delete"></i>
        </button>
        {% endif %}
    </div>
</script>
<script>
layui.use(['table','tree', 'form', 'jquery'], function(){
    const table = layui.table;
    const form = layui.form;
    const $ = layui.jquery;
    const ptree = layui.tree;

    const user_columns = () => [[
        {type: 'checkbox', fixed: 'left'},
        {field: 'id', title: 'ID', width: 80, sort: true},
        {field: 'title', title: '菜单名称', width: 100},
        {field: 'href', title: '菜单地址',align: 'center'},
        {field: 'icon', title: '图标', align: 'center'},
        {field: 'openType', title: '打开方式',align: 'center'},
        {field: 'type', title: '菜单类型', align: 'center'},
        {field: 'code', title: '权限code',align: 'center'},
        {field: 'sort', title: '排序',align: 'center'},
        {field: 'enabled', title: '是否启用',align: 'center'},
        {field: 'ca_time', title: '创建时间',align: 'center'},
        {field: 'up_time', title: '更新时间',align: 'center'},
        {title: '操作', toolbar: '#tool', align: 'center', width: 130},
    ]];

    // 已知数据渲染
    table.render({
        elem: '#power-table',
        cols: user_columns(),
        parseData: parserTableData,
        url:'/api/rightList',
        skin: 'line', // 表格风格
        even: true,
        page: true, // 是否显示分页
        height: 'full-248',
        limit:20,
        limits:[20,40,60,80,100],
        text: {none: '暂无数据'},
        toolbar: '#toolbar', /*工具栏*/
        defaultToolbar: ['filter', 'print', 'exports'], /*默认工具栏*/
    });

    // user查询
    form.on('submit(power-query)', function(data) {
        table.reload('power-table', {where: data.field})
        return false;
    });

    // 获取并渲染菜单树
    $.get(
        '/api/right',
        function (res) {
            console.log(res.result);
            ptree.render({
                elem: '#power-tree',
                data: res.result,
                onlyIconControl: true,
                customName: {
                    id: 'id',
                    title: 'title',
                    children: 'children'
                },
                click: function(obj) {
                    table.reload('power-table', {where: {'powerId': obj.data.id}})
                }
            });
        }
    );
});
</script>
</body>
</html>